<template>
    <header class="header">
        <div class="container">
            <router-link class="logo" :to="'/'" >keng</router-link>

            <ul class="nav-list">
                <li><router-link class="show" :to="'/'">论坛</router-link></li>
                <li v-if="userInfo"><router-link class="show" :to="'/user/' + userInfo.name">{{userInfo.name}}</router-link></li>
                <li v-if="userInfo"><router-link :to="'/setting'">设置</router-link></li>
                <li v-if="userInfo" @click="signOut()">退出</li>
                <li v-if="!userInfo"><router-link class=" " :to="'/sign'">注册</router-link></li>
                <li v-if="!userInfo"><router-link class="show" :to="'/login'">登录</router-link></li>
            </ul>
        </div>
    </header>
</template>
<script>
    import {mapState, mapMutations, mapActions} from 'vuex'
    import { signout } from "@/service/api"
    import { removeStore } from "@/config/mUtils"
 
    export default {
        data() {
            return {
                
            }
        },
        mounted(){
            //获取用户信息
            this.getUserInfo();
            // console.log(this.userInfo)
        },
        computed: {
            ...mapState([
                'userInfo'
            ]),
        },
        methods: {
            ...mapMutations([
                'OUT_LOGIN'
            ]),
            ...mapActions([
                'getUserInfo'
            ]),
            async signOut() {
                let res = await signout()
                // console.log(res)
                if(res.code) {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                    removeStore('user_id')
                    this.OUT_LOGIN()
                    this.$router.push('/')
                }
            }
        },
    }
</script>

<style lang="scss" scoped >
    @import '../../style/mixin';
    .header {
        @include lh(50px);
        color: #fff;
        background-color: $header;
        overflow: hidden;
        // @include fj;
        .logo {
            color: $fff;
        }
        .nav-list {
            float: right;
            li {
                float: left;
                padding-left: 10px;
                cursor: pointer;  
            }
            a {
                color: $fff;
                display: block;
                padding: 0 10px;
                &:hover {
                    color: $gray;
                }
            }
        }
        // text-align: center;
        // .login {
        //     flex: 1;
        //     @include fj(flex-end);
        //     background-color: $dark; 
        // }
        // .login a {
        //     width: 0.7rem;
        //     @include sc(0.16rem, $fff)
        // }
        // .login a:first-child {
        //     background-color: $main;
        // }
        // .login a:last-child {
        //     background-color: $green;
        // }
    }
</style>

